<template>
<div class="bg-white p-4 border border-gray-300">
    <div class=" p-6 space-y-8 text-gray-500 text-sm">
        <!-- 试卷信息 -->
        <div class="flex  space-x-8">
             <div class="flex  w-24 space-x-2">
                    <span >试卷信息</span>
                    <el-tooltip effect="dark"placement="top-start" >
                        <template #content>勾选后在试卷上显示 </template>
                        <el-icon class="text-gray-400/80 " size="large"><InfoFilled/></el-icon>
                    </el-tooltip>
            </div>
            <div class="w-full space-y-6">
                <!-- 从试卷详情中点击的导出设置  paperDetail-->
                <div class="grid grid-cols-2 gap-4" v-if="source=='paperDetail'">
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2 min-w-[120px]">
                        <el-checkbox v-model="pageSetting.examInfoDetail.isTitle" />
                        <label class="text-gray-700">试卷名称</label>
                        </div>
                        <el-input
                        v-model="pageSetting.examInfoDetail.title"
                        class="w-[200px]"
                        />
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2 min-w-[120px]">
                        <el-checkbox v-model="pageSetting.examInfoDetail.isQuestionBank" />
                        <label class="text-gray-700">题库名称</label>
                        </div>
                        <el-input
                        v-model="pageSetting.examInfoDetail.questionName"
                        class="w-[200px]"
                        />
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2 min-w-[120px]">
                        <el-checkbox v-model="pageSetting.examInfoDetail.isShowCourse" />
                        <label class="text-gray-700">教务课程名称</label>
                        </div>
                        <el-input
                        v-model="pageSetting.examInfoDetail.courseName"
                        class="w-[200px]"
                        />
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2 min-w-[120px]">
                        <el-checkbox v-model="pageSetting.examInfoDetail.isShowCourseCode" />
                        <label class="text-gray-700">教务课程编号</label>
                        </div>
                        <el-input
                        v-model="pageSetting.examInfoDetail.courseCode"
                        class="w-[200px]"
                        />
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2 min-w-[120px]">
                        <el-checkbox v-model="pageSetting.examInfoDetail.isCredit" />
                        <label class="text-gray-700">学分</label>
                        </div>
                        <el-input
                        v-model="pageSetting.examInfoDetail.creditValue"
                        class="w-[200px]"
                        />
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2 min-w-[120px]">
                        <el-checkbox v-model="pageSetting.examInfoDetail.isHours" />
                        <label class="text-gray-700">学时</label>
                        </div>
                        <el-input
                        v-model="pageSetting.examInfoDetail.hoursValue"
                        class="w-[200px]"
                        />
                    </div>
                </div>

               <!-- 页头说明 -->
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examInfo.paperDesc" />
                    <label class="text-gray-700">页头说明</label>
                    </div>
                    <el-input
                    v-model="pageSetting.examInfo.paperDescContent"
                    type="textarea"
                    :rows="3"
                    class="flex-1"
                    placeholder="请输入页头说明"
                    />
                </div>
               <!-- 页尾说明 -->
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examInfo.footerDesc" />
                    <label class="text-gray-700">页尾说明</label>
                    </div>
                    <el-input
                        v-model="pageSetting.examInfo.footerDescContent"
                        type="textarea"
                        :rows="3"
                        class="flex-1"
                        placeholder="请输入页尾说明"
                        />
                </div>

                <!-- 考试学期 -->
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examInfo.semester" />
                    <label class="text-gray-700">考试学期</label>
                    </div>
                    <el-input
                    v-model="pageSetting.examInfo.semesterValue"
                    class="w-[200px]"
                    placeholder="2025"
                    />
                </div>

                <!-- 适用年级 -->
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examInfo.grade" />
                    <label class="text-gray-700">适用年级</label>
                    </div>
                    <el-input
                    v-model="pageSetting.examInfo.applicableGrade"
                    class="w-[200px]"
                    />
                </div>

                <!-- 考试方式 -->
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examInfo.mode" />
                    <label class="text-gray-700">考试方式</label>
                    </div>
                    <el-select v-model="pageSetting.examInfo.examMode" class="w-[200px]">
                    <el-option label="闭卷" value="closed" />
                    <el-option label="开卷" value="open" />
                    </el-select>
                </div>

                <!-- 类型 -->
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examInfo.type" />
                    <label class="text-gray-700">类型</label>
                    </div>
                    <div class="flex items-center gap-2">
                        <el-input v-model="pageSetting.examInfo.typeValue" class="w-[120px]"/>
                        <span class="text-gray-600">卷</span>
                    </div>
                </div>

                <!-- 考试时间 -->
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examInfo.duration" />
                    <label class="text-gray-700">考试时间</label>
                    </div>
                    <div class="flex items-center gap-2">
                    <el-input
                        v-model="pageSetting.examInfo.durationValue"
                        class="w-[120px]"
                    />
                    <span class="text-gray-600">分钟</span>
                    </div>
                </div>

                <!-- 题目数量 -->
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examInfo.num" />
                    <label class="text-gray-700">题目数量</label>
                    </div>
                    <div class="flex items-center gap-2">
                    <span class="text-gray-600">(共___道题)</span>
                    </div>
                </div>

                <div class="flex ">
                     <el-button
                        type="primary"
                        link>
                        <el-icon><Plus /></el-icon>
                        <span>自定义信息</span>
                    </el-button> 
                </div>


            </div>
             
         </div>
         <!-- 考生信息 -->
        <div class="flex  space-x-8">
             <div class="flex  w-24 space-x-2">
                    <span >考生信息</span>
                    <el-tooltip effect="dark"placement="top-start" >
                        <template #content>勾选后在试卷上显示填写项 </template>
                        <el-icon class="text-gray-400/80 " size="large"><InfoFilled/></el-icon>
                    </el-tooltip>
            </div>
            <div class="w-full space-y-2">
               <!-- 页头说明 -->
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examineeInfo.department" />
                    <label class="text-gray-700">所属院系</label>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examineeInfo.major" />
                    <label class="text-gray-700">专业</label>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examineeInfo.class" />
                    <label class="text-gray-700">班级</label>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examineeInfo.name" />
                    <label class="text-gray-700">姓名</label>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.examineeInfo.studentId" />
                    <label class="text-gray-700">学号</label>
                    </div>
                </div>
                  <div class="flex ">
                     <el-button
                        type="primary"
                        link>
                        <el-icon><Plus /></el-icon>
                        <span>自定义信息</span>
                    </el-button> 
                </div>

            </div>
             
         </div>
         <!-- 承诺书信息 -->
        <div class="flex  space-x-8">
             <div class="flex  w-24 space-x-2">
                    <span >承诺书</span>
                    <el-tooltip effect="dark"placement="top-start" >
                        <template #content>勾选后在试卷上显示填写项 </template>
                        <el-icon class="text-gray-400/80 " size="large"><InfoFilled/></el-icon>
                    </el-tooltip>
            </div>
            <div class="w-full space-y-2">
                   <div class="flex items-start gap-4 mb-6">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.letterInfo.title" />
                    <label class="text-gray-700">标题</label>
                    </div>
                    <el-input
                    v-model="pageSetting.letterInfo.titleContent"
                    :rows="3"
                    class="flex-1"
                    placeholder="诚信考试承诺书"
                    />
                </div>
                   <div class="flex items-start gap-4 ">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.letterInfo.content" />
                    <label class="text-gray-700">内容</label>
                    </div>
                    <el-input
                    v-model="pageSetting.letterInfo.contentValue"
                    type="textarea"
                    :rows="3"
                    class="flex-1"
                    placeholder="我已阅读且透彻理解了“学校学生考场规则”和“学校学生违反校纪校规处理规定”，承诺在考试中自觉遵守，如有违反，按有关条款接受处理。"
                    />
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.letterInfo.signature" />
                    <label class="text-gray-700">承诺人签名</label>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.letterInfo.date" />
                    <label class="text-gray-700">日期</label>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.letterInfo.examineeSignature" />
                    <label class="text-gray-700">考生签名</label>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.letterInfo.studentId" />
                    <label class="text-gray-700">学号</label>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                    <el-checkbox v-model="pageSetting.letterInfo.majorClass" />
                    <label class="text-gray-700">专业班名</label>
                    </div>
                </div>
            </div>
             
         </div>
         <!-- 打印效果 -->
        <div class="flex  space-x-8">
             <div class="flex  w-24 space-x-2">
                    <span >打印效果</span>
            </div>
            <div class="w-full space-y-4">
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                        <label class="text-gray-700">试卷尺寸</label>
                    </div>
                     <el-radio-group v-model="pageSetting.printSetting.size"  class="grid">
                        <el-radio value="A4">A4</el-radio>
                        <el-radio value="A3">A3</el-radio>
                        <el-radio value="B4">B4</el-radio>
                        <el-radio value="8K">8K</el-radio>
                    </el-radio-group>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                        <label class="text-gray-700">试卷布局</label>
                    </div>
                     <el-radio-group v-model="pageSetting.printSetting.layout"  >
                        <el-radio value="one">单栏</el-radio>
                        <el-radio value="two">两栏</el-radio>
                    </el-radio-group>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                        <label class="text-gray-700">试卷方向</label>
                    </div>
                     <el-radio-group v-model="pageSetting.printSetting.direction"  class="grid">
                        <el-radio value="vertical">纵行</el-radio>
                        <el-radio value="horizontal">横向</el-radio>
                    </el-radio-group>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                        <label class="text-gray-700">显示装订</label>
                    </div>
                    <el-switch v-model="pageSetting.printSetting.showBind"/>
                </div>
                <div class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                        <label class="text-gray-700">考生信息</label>
                    </div>
                     <el-radio-group v-model="pageSetting.printSetting.examineeInfoPosition"  class="grid">
                        <el-radio value="in">位置在装订线内（显示在表头）</el-radio>
                        <el-radio value="out ">位置在装订线外（显示在侧面）</el-radio>
                    </el-radio-group>
                </div>
                <div  class="flex items-start gap-4 ">
                    <div class="flex items-center gap-2 min-w-[120px]"></div>
                     <div class="flex  space-x-6">
                        <div class="flex items-center gap-4">
                            <span  class="whitespace-nowrap" >待填写处样式</span>
                            <el-select v-model="pageSetting.printSetting.fillStyle" placeholder="请选择" class="w-40 ">
                                <el-option label="带下划线" value="underline"></el-option>
                                <el-option label="不带下划线" value="noUnderline"></el-option>
                            </el-select> 
                        </div>   
                        <div class="flex items-center gap-4">
                            <span  class="whitespace-nowrap" >下划线长度:</span>
                            <!-- 封装一个进度条 -->
                        </div>   
                    </div>
                </div>
                <div  class="flex items-start gap-4">
                    <div class="flex items-center gap-2 min-w-[120px]"></div>
                     <div class="flex  space-x-6">
                        <div class="flex items-center gap-4">
                            <span  class="whitespace-nowrap" >考生信息显示</span>
                            <el-select v-model="pageSetting.printSetting.studentInfoPosition" placeholder="请选择" class="w-40 ">
                                <el-option label="首页显示" value="home"></el-option>
                                <el-option label="每一页显示" value="each"></el-option>
                            </el-select> 
                        </div>    
                    </div>
                </div>
                <!-- 试题卷 -->
               <div class="flex items-start gap-4 border-b ">
                    <div class="flex items-center gap-2 min-w-[120px]">
                        <label class="text-gray-700">试题卷</label>
                    </div>
                    <!-- 试题卷 -->
                    <div class="w-full">
                        <div class="flex items-start gap-4">
                            <div class="flex items-center min-w-[120px]">
                                <label class="text-gray-700">题目选项</label>
                            </div>
                            <el-radio-group v-model="pageSetting.questionPaper.questionOption"  >
                                <el-radio value="default">默认显示</el-radio>
                                <el-radio value="single">单行显示</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="flex  gap-4">
                            <div class="flex items-center min-w-[120px]">
                                <label class="text-gray-700">试题头部信息设置</label>
                            </div>
                            <el-radio-group v-model="pageSetting.questionPaper.questionHeadTable"  >
                                <el-radio value="with">不带表格</el-radio>
                                <el-radio value="no">带表格</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="flex items-start gap-4 mb-6">
                            <div class="flex items-center min-w-[120px]">
                                <label class="text-gray-700">显示全部题型分值表设置</label>
                            </div>
                      
                            <el-checkbox-group class="grid" v-model="pageSetting.questionPaper.questionAllScoreSetting">
                                <el-checkbox value="1" > <label class="text-gray-700">显示题型分值</label></el-checkbox>
                                <el-checkbox value="2" > <label class="text-gray-700">显示题型得分</label></el-checkbox>
                                <el-checkbox value="3" > <label class="text-gray-700">显示试卷总分</label></el-checkbox>
                                <el-checkbox value="4" > <label class="text-gray-700">显示核分人</label></el-checkbox>
                                <el-checkbox value="5" > <label class="text-gray-700">显示复查人</label></el-checkbox>
                                <el-checkbox value="6" > <label class="text-gray-700">显示评卷人</label></el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="flex items-start gap-8 mb-6">
                            <div class="flex items-center min-w-[120px]">
                                <label class="text-gray-700">显示单个题型得分分值</label>
                            </div>
                            <el-checkbox-group class="flex flex-col" v-model="pageSetting.questionPaper.questionSingleScoreSetting">
                                <el-checkbox value="1" > <label class="text-gray-700">显示得分</label></el-checkbox>
                                <el-checkbox value="2" > <label class="text-gray-700">显示评卷人</label></el-checkbox>
                                <el-checkbox value="3" > <label class="text-gray-700">显示复核</label></el-checkbox>
                            </el-checkbox-group>
                        </div>
                       <div class="flex items-start gap-4">
                            <div class="flex items-center  min-w-[120px]">
                                <el-checkbox v-model="pageSetting.questionPaper.examModeSetting" />
                                <label class="text-gray-700">考核方式显示设置:</label>
                            </div>
                          
                            <el-radio-group v-model="pageSetting.questionPaper.examTypeDisplay"  >
                                <el-radio value="open">开卷</el-radio>
                                <el-radio value="closed">闭卷</el-radio>
                            </el-radio-group>        
                        </div>
                       <div class="flex items-start gap-4">
                            <div class="flex items-center  min-w-[120px]">
                                <el-checkbox v-model="pageSetting.questionPaper.showSeatNo" />
                                <label class="text-gray-700">右上角显示座位号</label>
                            </div>     
                        </div>
                        <!-- 页眉的设置 -->
                       <div class="flex items-start flex-col gap-4 mb-6">
                            <div class="flex items-start gap-4">
                                <div class="flex items-center  min-w-[120px]">
                                    <el-checkbox v-model="pageSetting.questionPaper.pageHeader" />
                                    <label class="text-gray-700">页眉样式设置：</label>
                                </div>
                            
                                <el-radio-group v-model="pageSetting.questionPaper.pageHeaderPosition"  >
                                    <el-radio value="left">居左</el-radio>
                                    <el-radio value="center">居中</el-radio>
                                    <el-radio value="right">居右</el-radio>
                                </el-radio-group>  
                            </div>
                            <div class="flex items-start gap-4 w-[80%] ">
                                <div class="flex items-center min-w-[210px] justify-end">
                                    <label class="text-gray-700">页眉说明</label>
                                </div>
                                  <el-input
                                    v-model="pageSetting.questionPaper.pageHeaderContent"
                                    type="textarea"
                                    :rows="2"
                                    class="flex-1 "
                                    placeholder="请输入内容不超过50字"
                                    />
                            </div>     
                        </div>
                        <!-- 页脚的设置 -->
                       <div class="flex items-start flex-col gap-4 mb-6">
                            <div class="flex items-start gap-4">
                                <div class="flex items-center  min-w-[120px]">
                                    <el-checkbox v-model="pageSetting.questionPaper.pageHeader" />
                                    <label class="text-gray-700">页脚样式设置：</label>
                                </div>
                            
                                <el-radio-group v-model="pageSetting.questionPaper.pageFooterPosition"  >
                                    <el-radio value="left">居左</el-radio>
                                    <el-radio value="center">居中</el-radio>
                                    <el-radio value="right">居右</el-radio>
                                </el-radio-group>  
                            </div>
                            <div class="flex items-start gap-4 w-[80%] mb-6 ">
                                <div class="flex items-center min-w-[210px] justify-end">
                                    <label class="text-gray-700">页眉说明</label>
                                </div>
                                  <el-input
                                    v-model="pageSetting.questionPaper.pageFooterContent"
                                    type="textarea"
                                    :rows="2"
                                    class="flex-1 "
                                    placeholder="请输入内容不超过50字"
                                    />
                            </div>     
                        </div>
                        <!-- 页码的设置 -->
                       <div class="flex items-start flex-col gap-4 mb-6">
                            <div class="flex items-start gap-4">
                                <div class="flex items-center  min-w-[120px]">
                                    <el-checkbox v-model="pageSetting.questionPaper.pageNumber" />
                                    <label class="text-gray-700">页码设置：</label>
                                </div>
                               <div class="flex flex-col gap-2">
                                    <el-radio-group v-model="pageSetting.questionPaper.pageNumberPosition"  >
                                        <el-radio value="header">显示在页眉</el-radio>
                                        <el-radio value="footer">显示在页脚</el-radio>
                                    </el-radio-group>  
                                    <el-radio-group v-model="pageSetting.questionPaper.pageNumberFormat"  >
                                        <el-radio value="showPage">只显示第__页</el-radio>
                                        <el-radio value="totalAndPage">显示共__页，第__页</el-radio>
                                    </el-radio-group>  
                                </div>
                            </div>
                             
                        </div>
                        

                    </div>
                </div>
                <!-- 答题卷 -->
               <div class="flex  gap-4 border-b ">
                    <div class="flex  gap-2 min-w-[120px]">
                        <label class="text-gray-700">答题卷</label>
                    </div>
                
                    <div class="w-full">
                        <div class="flex items-start gap-4 mb-6">
                            <div class="flex items-center min-w-[120px]">
                                <label class="text-gray-700">显示全部题型分值表设置</label>
                            </div>
                      
                            <el-checkbox-group class="grid p-0" v-model="pageSetting.answerPaper.questionAllScoreSetting" >
                                <el-checkbox value="1" > <label class="text-gray-700">显示题型分值</label></el-checkbox>
                                <el-checkbox value="2" > <label class="text-gray-700">显示题型得分</label></el-checkbox>
                                <el-checkbox value="3" > <label class="text-gray-700">显示试卷总分</label></el-checkbox>
                                <el-checkbox value="4" > <label class="text-gray-700">显示核分人</label></el-checkbox>
                                <el-checkbox value="5" > <label class="text-gray-700">显示复查人</label></el-checkbox>
                                <el-checkbox value="6" > <label class="text-gray-700">显示评卷人</label></el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="flex items-start gap-8 mb-6">
                            <div class="flex items-center min-w-[120px]">
                                <label class="text-gray-700">显示单个题型得分分值</label>
                            </div>
                            <el-checkbox-group class="flex flex-col" v-model="pageSetting.answerPaper.questionSingleScoreSetting">
                                <el-checkbox value="1" > <label class="text-gray-700">显示得分</label></el-checkbox>
                                <el-checkbox value="2" > <label class="text-gray-700">显示评卷人</label></el-checkbox>
                                <el-checkbox value="3" > <label class="text-gray-700">显示复核</label></el-checkbox>
                            </el-checkbox-group>
                        </div>
                      
                        <!-- 页眉的设置 -->
                       <div class="flex items-start flex-col gap-4 mb-6">
                            <div class="flex items-start gap-4">
                                <div class="flex items-center  min-w-[120px]">
                                    <el-checkbox v-model="pageSetting.answerPaper.pageHeader" />
                                    <label class="text-gray-700">页眉样式设置：</label>
                                </div>
                            
                                <el-radio-group v-model="pageSetting.answerPaper.pageHeaderPosition"  >
                                    <el-radio value="left">居左</el-radio>
                                    <el-radio value="center">居中</el-radio>
                                    <el-radio value="right">居右</el-radio>
                                </el-radio-group>  
                            </div>
                            <div class="flex items-start gap-4 w-[80%] ">
                                <div class="flex items-center min-w-[210px] justify-end">
                                    <label class="text-gray-700">页眉说明</label>
                                </div>
                                  <el-input
                                    v-model="pageSetting.answerPaper.pageHeaderContent"
                                    type="textarea"
                                    :rows="2"
                                    class="flex-1 "
                                    placeholder="请输入内容不超过50字"
                                    />
                            </div>     
                        </div>
                        <!-- 页脚的设置 -->
                       <div class="flex items-start flex-col gap-4 mb-6">
                            <div class="flex items-start gap-4">
                                <div class="flex items-center  min-w-[120px]">
                                    <el-checkbox v-model="pageSetting.answerPaper.pageHeader" />
                                    <label class="text-gray-700">页脚样式设置：</label>
                                </div>
                            
                                <el-radio-group v-model="pageSetting.answerPaper.pageFooterPosition"  >
                                    <el-radio value="left">居左</el-radio>
                                    <el-radio value="center">居中</el-radio>
                                    <el-radio value="right">居右</el-radio>
                                </el-radio-group>  
                            </div>
                            <div class="flex items-start gap-4 w-[80%] mb-6 ">
                                <div class="flex items-center min-w-[210px] justify-end">
                                    <label class="text-gray-700">页眉说明</label>
                                </div>
                                  <el-input
                                    v-model="pageSetting.answerPaper.pageFooterContent"
                                    type="textarea"
                                    :rows="2"
                                    class="flex-1 "
                                    placeholder="请输入内容不超过50字"
                                    />
                            </div>     
                        </div>
                        <!-- 页码的设置 -->
                       <div class="flex items-start flex-col gap-4 mb-6">
                            <div class="flex items-start gap-4">
                                <div class="flex items-center  min-w-[120px]">
                                    <el-checkbox v-model="pageSetting.answerPaper.pageNumber" />
                                    <label class="text-gray-700">页码设置：</label>
                                </div>
                               <div class="flex flex-col gap-2">
                                    <el-radio-group v-model="pageSetting.answerPaper.pageNumberPosition"  >
                                        <el-radio value="header">显示在页眉</el-radio>
                                        <el-radio value="footer">显示在页脚</el-radio>
                                    </el-radio-group>  
                                    <el-radio-group v-model="pageSetting.answerPaper.pageNumberFormat"  >
                                        <el-radio value="showPage">只显示第__页</el-radio>
                                        <el-radio value="totalAndPage">显示共__页，第__页</el-radio>
                                    </el-radio-group>  
                                </div>
                            </div>
                             
                        </div>
                    </div>
                </div>
                <!--按题型设置作答区域  -->
                <div class="flex items-start gap-4">
                    <div class="flex items-center min-w-[120px]">
                        <label class="text-gray-700">按题型设置作答区域</label>
                    </div>
                    <div class="grid grid-cols-4 gap-6">
                        <div  class="flex items-center space-x-2">
                            <span>填空题</span>
                            <el-input v-model="pageSetting.questionTypeArea.fillIn" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>简答题</span>
                            <el-input v-model="pageSetting.questionTypeArea.shortAnswer" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>论述题</span>
                            <el-input v-model="pageSetting.questionTypeArea.essay" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>名词解释</span>
                            <el-input v-model="pageSetting.questionTypeArea.terminology" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>计算题</span>
                            <el-input v-model="pageSetting.questionTypeArea.calculation" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>分录题目</span>
                            <el-input v-model="pageSetting.questionTypeArea.shortAnswer" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>新阅读理解</span>
                            <el-input v-model="pageSetting.questionTypeArea.newReading" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>资料题</span>
                            <el-input v-model="pageSetting.questionTypeArea.material" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>口录题</span>
                            <el-input v-model="pageSetting.questionTypeArea.spoken" class="w-10"/>
                            <span>行</span>
                        </div>
                        <div  class="flex items-center space-x-2">
                            <span>其他</span>
                            <el-input v-model="pageSetting.questionTypeArea.other" class="w-10"/>
                            <span>行</span>
                        </div>
                    </div>

                    
                </div>
                <!-- 设置页尾说明显示区域 -->
               <div class="flex items-center gap-4 border-b py-4">
                    <div class="flex items-center gap-2 min-w-[120px]">
                        <label class="text-gray-700">设置页尾说明显示区域</label>
                    </div>
                    <div  class="flex items-center space-x-2">
                        <span>试卷最后一道题间隔</span>
                       <el-input
                            v-model="pageSetting.lastQuestionInterval"
                            class="w-20"
                            placeholder="15"
                            />
                        <span>行</span>
                    </div>
                </div>
                 

              
                 
                
               
            </div>
             
         </div>
         <!-- 导出效果 -->
        <div class="flex  space-x-8">
             <div class="flex  w-24 space-x-2">
                    <span >导出内容</span>
            </div>
            <div class="flex flex-col space-y-2">
                  <el-checkbox v-model="pageSetting.letterInfo.title" ><label class="text-gray-700">答题卷</label></el-checkbox>
                  <el-checkbox v-model="pageSetting.letterInfo.content" ><label class="text-gray-700">附件</label></el-checkbox> 
                  <el-checkbox v-model="pageSetting.letterInfo.examineeSignature" ><label class="text-gray-700">答案</label></el-checkbox>
                  <el-checkbox v-model="pageSetting.letterInfo.date" ><label class="text-gray-700">解析</label></el-checkbox>
            </div>
             
         </div>
         <!-- 提交按钮 -->
         <div class="flex items-center justify-center space-x-8">
            <el-button class="w-20" @click="handleCancel" round>取消</el-button>
            <el-button class="w-20" type="primary" @click="handleExport" round>导出试卷</el-button>
         </div>

    </div>
</div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { InfoFilled } from '@element-plus/icons-vue'
import { getPaperInfo} from '@/api/exam'
const route = useRoute()
const router = useRouter()
//  来源 从试卷库导出paperStore 或导出从试卷详情导出paperDetail

console.log('导出设置的来源：',route.query.source);
const  source = ref(route.query.source)
const  paperId = ref(route.query.id)
//根据id查询试卷的详细信息
const getPaperDetail = async () => {
    getPaperInfo(paperId.value).then((res)=>{
        console.log(res,'<<<试卷详情信息');
        pageSetting.examInfoDetail.title=res.data.data.title
        pageSetting.examInfoDetail.questionName=res.data.data.questionName
        pageSetting.examInfoDetail.courseName=res.data.data.courseName
        pageSetting.examInfoDetail.courseCode=res.data.data.courseCode
        pageSetting.examInfoDetail.creditValue=res.data.data.creditValue
        pageSetting.examInfoDetail.hoursValue=res.data.data.hoursValue
        console.log(pageSetting.examInfoDetail,'<<<试卷详情信息111');
    })
}
onMounted(()=>{
    getPaperDetail()

})
// 页面设置选项 
const pageSetting = reactive({
  //导出设置从试卷详情导出时，需要携带试卷详情信息
  examInfoDetail:{
    //试卷名称
    isTitle:true,
    title:null,

    //题库名称
    isQuestionBank:true,
    questionName:null,
    //教务课程名称
    isShowCourse:true,
    courseName:null,

    //教务课程编号
    isShowCourseCode:true,
    courseCode:null,

    // 学分
    isCredit:true,
    creditValue:null,

    // 学时
    isHours:true,
    hoursValue:null,
  },

   examInfo:{
    paperDesc:true,
    paperDescContent:null,//页面说明
    //页尾说明
    footerDesc:true,
    footerDescContent:null,
    //考试学期
    semester:true,
    semesterValue:2025,

    //适用年级
    grade:true,
    applicableGrade:'2023',
    //考试方式
    mode:true,
    examMode:'closed',
    //类型
    type:true,
    typeValue:'1',
    //考试时间
    duration: true,
    durationValue: 120,
    //题目数量
    num:true,
    questionNum:null,
  },
  examineeInfo:{
    //所属院系
    department:true,
   //专业
   major:true,
   //班级
   class:true,
   //姓名
   name:true,
   //学号
   studentId:true,
  },
  //承诺书
  letterInfo:{
    //标题
    title:true,
    titleContent:null,
    //内容
    content:true,
    contentValue:null,
    //承诺人签名
    signature:true,
    //签名
    
    //日期
    date:true,
    //考生签名
    examineeSignature:true,
    //学号
    studentId:true,

    //专业班名
    majorClass:true,

  },
  //打印效果
  printSetting:{
    //试卷尺寸
    size:'A4',
    //试卷布局
    layout:'one',
    //试卷方向
    direction:'vertical',
    //显示装订
    showBind:true,
     //考生信息位置
    examineeInfoPosition:'in',
    //是否显示下划线
    fillStyle:'underline',
    // 下划线长度
    fillLineLength:null,
    //学生信息显示位置
    studentInfoPosition:'home',
    













  },
  //试题卷
    questionPaper:{
    //题目选项
    questionOption:'default',
    //试题头部信息设置
    questionHeadTable:'with',
    //显示全部题型分值表设置
    questionAllScoreSetting:['1','2','3','4','5','6'],
    //显示单个题型得分分值
    questionSingleScoreSetting:['1','2','3'],
    //考核方式显示设置
    examModeSetting:true,
    examTypeDisplay:'open',
    //右上角显示座位号
    showSeatNo:true,

    //页眉设置
    pageHeader:true,
    //页眉位置设置
    pageHeaderPosition:'center',
    //页眉内容设置
    pageHeaderContent:null,
   

    //页脚设置
    pageFooter:true,
     //页脚位置设置
    pageFooterPosition:'center',
    //页脚内容设置
    pageFooterContent:null,

    //页码的设置
    pageNumber:true,
    //页码的位置设置
    pageNumberPosition:'footer',
    //页码的格式设置
    pageNumberFormat:'totalAndPage',
    },
  //答题卷
    answerPaper:{
    //显示全部题型分值表设置
    questionAllScoreSetting:['1','2','3','4','5','6'],
    //显示单个题型得分分值
    questionSingleScoreSetting:['1','2','3'],
    //页眉设置
    pageHeader:true,
    //页眉位置设置
    pageHeaderPosition:'center',
    //页眉内容设置
    pageHeaderContent:null,

    //页脚设置
    pageFooter:true,
     //页脚位置设置
    pageFooterPosition:'center',
    //页脚内容设置
    pageFooterContent:null,

    //页码的设置
    pageNumber:true,
    //页码的位置设置
    pageNumberPosition:'footer',
    //页码的格式设置
    pageNumberFormat:'totalAndPage',
    },
    //按题型设置作答区域
    questionTypeArea:{
        //填空
        fillIn:'11',
        //简答题
        shortAnswer:'5',
        // 论述题
        essay:'5',
        //名词解析题
        terminology:'1',
        //计算题
        calculation:'1',
        // 分录题目
        journalEntry:'1',
        //新阅读理解
        newReading:'1',
        //资料题目
        material:'1',
        //口语题
        spoken:'1',
        //其他
        other:'1'

    },

    //试卷最后一道题间隔
    lastQuestionInterval:'15',
   
})
const  handleCancel = ()=>{
    // router.back()
}

const handleExport = ()=>{
    console.log('导出试卷的设置',pageSetting);
}
</script >
<style lang="less" scoped>

</style>